<template>
  <div class="addButton">
    <el-button type="primary" size="mini" @click="dialogFormVisibleAdd = true">创建新考核任务</el-button>
    <el-dialog :close-on-click-modal="false" @opened="$store.commit('dialogTop')" :append-to-body="true" title="创建新考核任务"
               :visible.sync="dialogFormVisibleAdd" @close="resetForm('ruleFormAdd')" @open="dialogOpen">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="110px" class="demo-ruleForm">
        <el-form-item label="考核名称" prop="examineName"
                      :rules="[{ 'required':true, 'message': '请输入考核名称', 'trigger': 'blur' }]">
          <el-input size="small" :maxlength="50" v-model="ruleFormAdd.examineName" placeholder="考核名称"></el-input>
        </el-form-item>
        <el-form-item label="选择考核模板" prop="templateId"
                      :rules="[{ 'required':true, 'message': '请选择考核模板',}]">
          <el-select v-model="ruleFormAdd.templateId" style="width: 100%;" size="mini" clearable placeholder="考核模板">
            <el-option
              v-for="item in templateList"
              :key="item.templateId"
              :label="item.templateName"
              :value="item.templateId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="考核时间范围" prop="examineBeginTime"
                      :rules="[{ 'required':true, 'message': '请选择考核时间范围', 'trigger': 'blur' }]">
          <el-date-picker
            style="width: 100%"
            v-model="value1"
            type="daterange"
            align="left"
            placeholder="考核时间范围"
            @change="getChangeTime(value1,1)"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="单位考核时间" prop="launchBeginTime"
                      :rules="[{ 'required':true, 'message': '请选择单位考核时间', 'trigger': 'blur' }]">
          <el-date-picker
            style="width: 100%"
            v-model="value2"
            type="daterange"
            align="left"
            placeholder="单位考核时间"
            @change="getChangeTime(value2,2)"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="初步意见征询" prop="resultBeginTime"
                      :rules="{required: true, message: '初步意见征询不能为空', 'trigger': 'blur'  }">
          <el-date-picker
            style="width: 100%"
            v-model="value3"
            type="daterange"
            align="left"
            placeholder="初步意见征询"
            @change="getChangeTime(value3,3)"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考核审查认定" prop="checkBeginTime"
                      :rules="[{ 'required':true, 'message': '考核审查认定时间不能为空', 'trigger': 'blur' }]">
          <el-date-picker
            style="width: 100%"
            v-model="value4"
            type="daterange"
            align="left"
            placeholder="考核审查认定"
            @change="getChangeTime(value4,4)"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结果公示发布" prop="releaseBeginTime"
                      :rules="[{ 'required':true, 'message': '结果公示发布不能为空', 'trigger': 'blur' }]">
          <el-date-picker
            style="width: 100%"
            v-model="value5"
            type="daterange"
            align="left"
            placeholder="结果公示发布"
            @change="getChangeTime(value5,5)"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin: 20px 0 15px 0 ;">
        <el-button size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleFormAdd')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: ["templateList"],
    data () {

      return {
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        ruleFormAdd: {
          "templateId": "",
          "examineName": "",
          "examineBeginTime": "",
          "examineEndTime": "",
          "launchBeginTime": "",
          "launchEndTime": "",
          "resultBeginTime": "",
          "resultEndTime": "",
          "opinionBeginTime": "",
          "opinionEndTime": "",
          "checkBeginTime": "",
          "checkEndTime": "",
          "releaseBeginTime": "",
          "releaseEndTime": ""
        },
        dialogFormVisibleAdd: false,
        rulesAdd: {}
      }
    },
    created(){

    },
    components: {},
    methods: {
      getChangeTime(val, key){
        let value1, value2
        if (val) {
          value1 = this.dtime(val[0]).format("YYYY-MM-DD 00:00:00")
          value2 = this.dtime(val[1]).format("YYYY-MM-DD 23:59:59")
        } else {
          value1 = ""
          value2 = ""
        }
        if (key == 1) {
          this.ruleFormAdd.examineBeginTime = value1
          this.ruleFormAdd.examineEndTime = value2
        } else if (key == 2) {
          this.ruleFormAdd.launchBeginTime = value1
          this.ruleFormAdd.launchEndTime = value2
        } else if (key == 3) {
          this.ruleFormAdd.resultBeginTime = value1
          this.ruleFormAdd.resultEndTime = value2
        } else if (key == 4) {
          this.ruleFormAdd.checkBeginTime = value1
          this.ruleFormAdd.checkEndTime = value2
        } else if (key == 5) {
          this.ruleFormAdd.releaseBeginTime = value1
          this.ruleFormAdd.releaseEndTime = value2
        }
      },
      dialogOpen(){

      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + '/examine/insertTask', this.ruleFormAdd)
          .then(response => {
            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.dialogFormVisibleAdd = false
              this.$emit('searchRowsInfo')
              this.$emit('getTempalteInfo')
            }

          })
          .catch(error => {
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否创建新考核任务 '+this.ruleFormAdd.examineName, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.handleDiaSureAdd()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消创建'
              });
            });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.value1=""
        this.value2=""
        this.value3=""
        this.value4=""
        this.value5=""
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .addButton
    display inline-block
    margin-left 10px


</style>
